
<template>
  <div class="home" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //背景图片索引
      imgIndex: 0,
      //背景图片容器
      bgImgArr: [],
      //当前背景图片
      bgImg: {}
    }
  },
  created() {
    //背景图片导入
    for (var i = 0; i < 6; i++) {
      this.bgImgArr.push(require("../assets/img/" + (i + 1) + ".jpg"))
    }
    this.init()
  },
  methods: {
    //初始化
    init() {
      //每10秒更换一次背景图片
      setInterval(this.changeImg, 10000)
    },
    //背景图片索引控制
    changeImg() {
      if (this.imgIndex < 5) {
        this.imgIndex++
      } else {
        this.imgIndex = 0
      }
      this.bgImg = this.bgImgArr[this.imgIndex]
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  background-size: 100% 100%;
}
</style>